<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h3>父组件</h3>
        <input type="button" value="显示组件A" @click=" name='CompA' ">
        <input type="button" value="显示组件B" @click=" name='CompB' ">
        <input type="button" value="显示组件C" @click=" name='CompC' ">
        <hr>
        <!-- <keep-alive exclude="CompC"> -->
        <keep-alive include="CompA,CompB">
            <component :is=" name "></component>
        </keep-alive>
        <hr>
    </div>
    <template id="tempa">
        <div>
            <h3>组件A</h3>
        </div>
    </template>
    <template id="tempb">
        <div>
            <h3>组件B</h3>
        </div>
    </template>
    <template id="tempc">
        <div>
            <h3>组件C</h3>
        </div>
    </template>
</body>
<script>
    /*
        组件缓存，全局组件 keep-alive
        功能性目的：减少程序在运行时组件创建和删除导致的性能损耗（提示访问速率）
        - 当前一个组件第一被访问时，自动完成创建挂载过程
        - 如果该动态组件被 keep-alive 进行包裹，该组件在创建完成后会被保存在内存中
        - 当再次调用时，从内存中直接加载读取，不在进行重复组件创建
            * 生命周期不会重复执行

        include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
        exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
        max - 控制缓存组件数量

        vue为缓存组件新增的生命周期函数
            activated() {
                console.log("组件A-组件调用")
            },
            deactivated() {
                console.log("组件A-组件缓存")                    
            },
    */
    new Vue({
        el: '#app',
        data:{
            name:"CompA"
        },
        components:{
            CompA:{
                template:"#tempa",
                created() {
                    console.log("组件A-created")
                },
                mounted() {
                    console.log("组件A-mounted")
                },
                destroyed() {
                    console.log("组件A-destroyed")
                },
                activated() {
                    console.log("组件A-组件调用")
                },
                deactivated() {
                    console.log("组件A-组件缓存")                    
                },
            },
            CompB:{
                template:"#tempb",
                created() {
                    console.log("组件B-created")
                },
                mounted() {
                    console.log("组件B-mounted")
                },
                destroyed() {
                    console.log("组件B-destroyed")
                },
            },
            CompC:{
                template:"#tempc",
                created() {
                    console.log("组件C-created")
                },
                mounted() {
                    console.log("组件C-mounted")
                },
                destroyed() {
                    console.log("组件C-destroyed")
                },
            }
        }
    });
</script>

</html>